﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <link type="text/css" href="css/style_login.css" rel="stylesheet"/>
    <title>超级智能收银系统</title>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/anime.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/message.js"></script>
</head>
<body>
<div class="page">
    <div class="container">
        <div class="left">
            <div class="login">欢迎使用</div>
            <div class="eula">超级智能收银系统</div>
        </div>
        <div class="right">
            <svg viewBox="0 0 320 300">
                <defs>
                    <linearGradient
                            inkscape:collect="always"
                            id="linearGradient"
                            x1="13"
                            y1="193.49992"
                            x2="307"
                            y2="193.49992"
                            gradientUnits="userSpaceOnUse">
                        <stop
                                style="stop-color:#ff00ff;"
                                offset="0"
                                id="stop876"/>
                        <stop
                                style="stop-color:#ff0000;"
                                offset="1"
                                id="stop878"/>
                    </linearGradient>
                </defs>
                <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143"/>
            </svg>
            <div class="form">
                <label for="account">账号</label>
                <input type="text" id="account" value="">
                <label for="password">密码</label>
                <input type="password" id="password" value="">
                <input type="submit" id="submit" onclick="login()" value="提交">
            </div>
        </div>
    </div>
</div>

<script type="application/javascript">
    var current = null;
    document.querySelector('#account').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: 0,
                duration: 700,
                easing: 'easeOutQuart'
            },
            strokeDasharray: {
                value: '240 1386',
                duration: 700,
                easing: 'easeOutQuart'
            }
        });
    });
    document.querySelector('#password').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: -336,
                duration: 700,
                easing: 'easeOutQuart'
            },
            strokeDasharray: {
                value: '240 1386',
                duration: 700,
                easing: 'easeOutQuart'
            }
        });
    });
    document.querySelector('#submit').addEventListener('focus', function (e) {
        if (current) current.pause();
        current = anime({
            targets: 'path',
            strokeDashoffset: {
                value: -730,
                duration: 700,
                easing: 'easeOutQuart'
            },
            strokeDasharray: {
                value: '530 1386',
                duration: 700,
                easing: 'easeOutQuart'
            }
        });
    });

    function login() {
        let acct = $("#account").val();
        if (acct == null || acct == "") {
            $.message({
                message: "请输入账号！",    //提示信息
                duration: 2000,
                type: 'error',           //显示类型，包括4种：success.error,info,warning 默认info
                showClose: false       //显示关闭按钮（默认：否）
            });
            return;
        }
        let pwd = $("#password").val();
        if (pwd == null || pwd == "") {
            $.message({
                message: "请输入密码！",    //提示信息
                duration: 2000,
                type: 'error',           //显示类型，包括4种：success.error,info,warning 默认info
                showClose: false       //显示关闭按钮（默认：否）
            });
            return;
        }
        cashierPost("user/login.do",{account: acct, password: pwd},someFunction);
    }
    function someFunction(result) {
      if(result != null) {
        window.sessionStorage.setItem("account", JSON.stringify(result));
        window.location.href = "tab.html";
      }
    }
    $(function () {
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                login();
            }
        });
    });
</script>

</body>
</html>
